<template>
    <div>
    <myheader></myheader>

    <br>

    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
        
            商品分类名称：<input type="text" v-model="catename">
        <br>

        <Button @click="submit">添加分类</Button>
        
        
        <table>
            <tr>
                <th>ID</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item, index) in cate_list" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.cname}}</td>
                <td>
                    <Button><router-link :to="{path:'/changecate',query:{'id':item.id}}">修改</router-link></Button>
                    <Button @click="remove(item.id)">删除</Button>
                </td>
            </tr>
        </table>
        
    </section>
    
    <myfooter></myfooter>
    </div>
</template>

<script>
//组件包含
import myheader from "./myheader.vue";
import myfooter from "./myfooter.vue";

export default {
    name:'editcategory',
    data() {
        return {
            datas:[{'title':'商品分类'}],
            catename:"",
            cate_list:[],
        }
    },
    components: {
        myheader: myheader,
        myfooter: myfooter,
    },
    mounted() {
        this.show()
    },
    methods: {
        submit(){
            this.axios({
                method:'POST',
                url:'http://127.0.0.1:8000/category/',
                data:{ 
                    catename : this.catename
                },
            }).then(resp=>{
                if (resp.data.code == 200) {

                    this.$Message(resp.data.msg)
                    
                    this.$router.go(0)

                }
            })
        },
        remove(id) {
            this.axios({
                method:'DELETE',
                url:'http://127.0.0.1:8000/category/',
                data:{
                    id :id
                }
            }).then(resp=>{
                if (resp.data.code == 200) {

                    alert(resp.data.msg)
                    
                    this.$router.go(0)
                }
            })
        },

        show(){
            this.axios({
                method:'GET',
                url:'http://127.0.0.1:8000/category/',
            }).then(resp=>{
                if (resp.data.code == 200) {

                    console.log(resp.data.data)

                    this.cate_list=resp.data.data
                }
            })
        },
    },
}
</script>

<style>

</style>